<!-- 目的地其它费用组件 -->
<template>
  <nut-popup class="FeeBox" position="bottom" closeable round :style="{ height: '50%' }" @click-close-icon="sendFeeEndMsg(0)" v-model:visible="props.showRound">
    <nut-cell class="title" title="目的地其它费用"></nut-cell>
    <p class="con flex-ld"><span class="tit">费用类目</span><span class="add flex" @click="add">添加类目</span></p>
    <view class="scrollBox">
      <view class="rowBox flex-ld" v-for="(item, index) in feeArr" :key="index">
        <p class="seBox flex-ld" @click="openPicker(index)">
          <span>{{ item.ssopRemark || '请选择费用类型' }}</span>
          <IconFont name="rect-right"></IconFont>
        </p>
        <p class="seInput flex-ld"><nut-input placeholder="请输入金额" v-model="item.actualMoney" :formatter="formatter" type="number" />元</p>
        <p class="del" @click="del(index)">删除</p>
      </view>
    </view>
    <!-- 类型弹窗 -->
    <nut-popup class="unloadBox" position="bottom" :style="{ height: '45%' }" round v-model:visible="pickerModel">
      <nut-picker v-model="value" :columns="columns" title="费用类型" @confirm="confirm" @cancel="pickerModel = false"></nut-picker>
    </nut-popup>

    <nut-button class="btn" block type="primary" color="#0966ff" @click="sendFeeEndMsg(1)">确定</nut-button>
  </nut-popup>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { getFeeType } from '@/@api/wait' // 待确认接口
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'

const props = defineProps<{
  showRound: boolean
  costList: Array<any>
}>()

const emit = defineEmits(['sendFeeEndMsg'])
const feeArr = ref<any>() // 费用的数组

const pickerModel = ref(false) // 费用弹窗
const value = ref()
const columns = ref() // 费用数组
const currentItem = ref('') // 当前操作的费用是哪个
const formatter = (value) => value.replace(/^0(.*)$/, '')

// 打开picker
const openPicker = (index) => {
  pickerModel.value = true
  // 当前操作项
  currentItem.value = index
}

// 确认选择费用类型
const confirm = ({ selectedValue, selectedOptions }) => {
  feeArr.value.forEach((obj) => {
    if (obj.ssopRemark == feeArr.value[currentItem.value].ssopRemark) {
      obj.ssopRemark = selectedOptions.map((val) => val.text).join(',') // 根据需要修改为新的值
    }
    pickerModel.value = false
  })
}

// 监听是否有费用,重组费用类型&金额的数据 费用类目数组增删改
watch(
  () => props.costList,
  (newVal) => {
    console.log(newVal, '监听costList目的地')
    if (newVal) {
      if (newVal.length == 0) {
        feeArr.value = [{ ssopRemark: '请选择费用类型', actualMoney: 0, ssopType: '目的地' }]
      } else {
        feeArr.value = newVal.filter((item) => {
          if (item.ssopType == '目的地') {
            return {
              ssopRemark: item.ssopRemark,
              actualMoney: item.actualMoney,
              ssopType: item.ssopType
            }
          }
        })
      }
    }
  }
)

// 添加类目
const add = () => {
  // 判断里面有没有没选的
  const hasSsopRemark = !feeArr.value.every((item) => item.ssopRemark != '请选择费用类型')
  if (hasSsopRemark) {
    Taro.showToast({
      title: '请选费用类型',
      icon: 'error',
      duration: 2000
    })
    return
  }
  // 判断里面有没有金额为0的
  const hasActualMoney = !feeArr.value.every((item) => Number(item.actualMoney) != 0)
  if (hasActualMoney) {
    Taro.showToast({
      title: '金额不能为0',
      icon: 'error',
      duration: 2000
    })
    return
  }
  const obj = {
    ssopRemark: '请选择费用类型',
    actualMoney: 0,
    ssopType: '目的地'
  }
  feeArr.value.push(obj)
}

// 删除类目
const del = (index) => {
  feeArr.value.splice(index, 1)
}

// 如果显示了再调接口查询类目
watch(
  () => props.showRound,
  (newVal) => {
    if (newVal) {
      initFeeType()
    }
  }
)

// 查询费用类目
async function initFeeType() {
  const res = await getFeeType(9)
  if (res.data.code == 200) {
    columns.value = res.data.data.map((item) => {
      return {
        text: item.ssopRemark,
        value: item.ssopRemark
      }
    })
  } else {
  }
}

// 判断是否无相同的
function hasSameSsopRemark(arr) {
  const ssopRemarks = new Set()
  for (const obj of arr) {
    if (ssopRemarks.has(obj.ssopRemark)) {
      return true
    }
    ssopRemarks.add(obj.ssopRemark)
  }
  return false
}

// 判断是否有0
function hasZeroActualMoney(arr) {
  for (const obj of arr) {
    if (Number(obj.actualMoney) == 0) {
      return true
    }
  }
  return false
}

const sendFeeEndMsg = (flag) => {
  // 判断里面有无未选择的类目 如果有提示选择
  const hasSsopRemark = !feeArr.value.every((item) => item.ssopRemark != '请选择费用类型')
  if (hasSsopRemark) {
    Taro.showToast({
      title: '请选择完整',
      icon: 'error',
      duration: 2000
    })
    return
  }

  // 判断里面有无相同类目 如果有提示删除
  const sameFlag = hasSameSsopRemark(feeArr.value)
  if (sameFlag) {
    Taro.showToast({
      title: '费用类型重复',
      icon: 'error',
      duration: 2000
    })
    return
  }
  // 判断里面是否有金额为0的 如果有提示填写
  const zeroFlag = hasZeroActualMoney(feeArr.value)
  if (zeroFlag) {
    Taro.showToast({
      title: '金额不能为0',
      icon: 'error',
      duration: 2000
    })
    return
  }
  if (flag) {
    const sendData = { feeEndCostList: feeArr.value }
    emit('sendFeeEndMsg', sendData) // 关闭弹窗传递数据
  } else {
    emit('sendFeeEndMsg', null) // 关闭弹窗不传递数据
  }
}
</script>

<style lang="scss" >
.FeeBox {
  padding-bottom: 100rpx;
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .flex-ld {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .title {
    font-weight: bold;
    color: #000;
  }
  .btn {
    position: fixed;
    bottom: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 702rpx;
    height: 88rpx;
    border-radius: 200rpx;
  }
  .con {
    width: 700rpx;
    padding: 25rpx 12rpx;
    margin: 0 auto;
    .tit {
      font-size: 28rpx;
      color: #252525;
      font-weight: bold;
    }
    .add {
      width: 128rpx;
      height: 48rpx;
      border-radius: 28rpx;
      background: #0966ff;
      color: #fff;
      font-size: 24rpx;
    }
  }
  .scrollBox {
    width: 100%;
    height: 500rpx;
    .rowBox {
      width: 710rpx;
      margin: 0 auto;
      margin-bottom: 12rpx;
    }
    .seBox {
      width: 384rpx;
      height: 72rpx;
      border-radius: 8rpx;
      color: #252525;
      font-size: 28rpx;
      background: #f5f5f5;
      padding: 8rpx 12rpx;
      box-sizing: border-box;
    }
    .seInput {
      width: 222rpx;
      height: 72rpx;
      border-radius: 8rpx;
      background: #f5f5f5;
      padding: 6rpx 12rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      color: #252525;
      .nut-input {
        padding: 0;
        background: none;
        line-height: 72rpx;
      }
      .input-text {
        font-size: 28rpx;
      }
    }
    .del {
      font-size: 24rpx;
      color: #fa5151;
    }
  }
}
</style>
